<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
     String path=request.getContextPath();
      String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 百度地图 -->
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{width:100%;height:500px;}
		p{margin-left:5px; font-size:14px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3XGnz776XBEPC9twLj6Zo8y91G4VYKAy"></script>
<link href="<%=basePath%>css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<script src="<%=basePath%>js/jquery.min.js"></script>
<script src="<%=basePath%>js/scripts.js"></script>
 <script src="<%=basePath%>js/jquery-1.11.0.js"></script>
<link href="<%=basePath%>css/styles.css" rel="stylesheet">
<link href="<%=basePath%>css/style.css" rel="stylesheet" type="text/css" media="all" />	
<link rel="stylesheet" href="<%=basePath%>layui/css/layui.css" media="all"/>
    <script src="<%=basePath%>layui/layui.js"></script>	
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="Real Home Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</head>
<body>
<!-- 头 -->
<div class="header">
	<div class="container">
			<div class="logo">
				<h1><a href="welcome.jsp">Cloud renting</a></h1>
			</div>
			<ul class="right-icons">
			    <li><span ><i class="glyphicon glyphicon-user"> </i>${user1.username}</span></li>
			    <li><span>${type}</span>
			    <c:if test="${user1.username!=null}">
				<li><a class="play-icon popup-with-zoom-anim" href="${pageContext.request.contextPath}/user/logout1">退出 </a></li>
			    </c:if>
			    <c:if test="${user1.username==null}">
				<li><a href="${pageContext.request.contextPath}/user/home1">Login</a></li>
			    </c:if>
			 </ul>
		<div class="top-nav">
			 <ul class="right-icons">
			    <li>
			    <div>
                       <iframe width="455" scrolling="no" height="75" frameborder="0" allowtransparency="true" 
                       src="http://i.tianqi.com/index.php?c=code&amp;id=38&amp;icon=1&amp;num=2&amp;align=left">
                         </iframe>
                 </div>        
               </li>
			</ul>
  </div>
		<div class="clearfix"> </div>
				<link href="<%=basePath%>css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
				<script src="<%=basePath%>js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
				<div id="small-dialog" class="mfp-hide"> 
				</div> 
		</div>
</div>
<!-- 图片 -->	
<div id="small-dialog" class="mfp-hide">
		<div class="clearfix"> </div>
</div>	
<div class=" banner-buying">
	<div class=" container">
	<div class="clearfix"> </div>
	</div>
</div>

<div class="container">
	
	<div class="buy-single-single">
	
		<div class="col-md-9 single-box">
				
       <div class=" buying-top">	
<!-- 图片轮播 -->
<div class="flexslider">
  <ul class="slides">
  </ul>
</div>
<script defer src="<%=basePath%>js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="<%=basePath%>css/flexslider.css" type="text/css" media="screen" />
<script>
//滚动效果
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});
</script>
</div>
<!-- 房屋信息 -->
       <div class="buy-sin-single" id="demo">

		</div>
					 
					 
					 <div class="map-buy-single">
					 	<h4>所在地</h4>
						 <div class="map-buy-single1" id="allmap">
						</div>
					</div>
		</div>
	<!-- 房屋推荐 -->
		<div class="col-md-3">
			<div class="single-box-right right-immediate" id="test">
		     	<h4>房屋推荐</h4>
				
		   </div>
			
	  </div>
		<div class="clearfix"> </div>
		</div>
	</div>
	<div class="container">
	<div class="future">
		<h3 >用户评论</h3>
			<div class="content-bottom-in">
		<form class="layui-form" action="">
			 <div class="layui-form-item layui-form-text">
             <div class="layui-input-block">
             <textarea placeholder="请输入评论内容" class="layui-textarea"></textarea>
          </div>
          <div class="layui-form-item">
         <div class="layui-input-block">
         <button class="layui-btn" lay-submit="" lay-filter="demo1">评论</button>
         <button type="reset" class="layui-btn layui-btn-primary">取消</button>
        </div>
      </div>
     </div>
     </form>
			</div>
			</div>
			</div>
<!--尾-->
<script type="text/javascript">
$(function(){
	$.ajax({
		
		type:'post',
		url:'homeinfo/homeimg',
		data:{
			"homeid":1001
		},
	success:function(data){
		homeandimg(data);
	}
	});
	$.ajax({
		type:'post',
		url:'homeinfo/homequery',
		data:{
			"homeid":1001
		},
	success:function(data){
		homequery(data);
	}
	});
	$.ajax({
		type:'post',
		url:'homeinfo/querylimit',
		data:{
			"homeid":1001
		},
	success:function(data){
		homelimit(data);
	}
	})
	
});
//加载房屋图片详细信息
function homeandimg(data){
		var html='';
	$.each(data,function(index,item){
		html=
		    '<li data-thumb="/img/'+item.imgpath+'">'+
		      '<img src="/img/'+item.imgpath+'" />'+
		    '</li>'
	$('.slides').append(html);
	})
};
//加载新房推荐
function homelimit(data){
	$.each(data,function(index,item){
		$("#test").append(
		'<div class="single-box-img ">'+
		'<div class="box-img">'+
			'<a href="JavaScript:"><img class="img-responsive" src="/img/'+item.coverimg+'" alt=""></a>'+
		'</div>'+
		'<div class="box-text">'+
			'<p><a href="JavaScript:">'+item.title+'</a></p>'+
			'<p><span class="bath1">价格</span>: <span class="two">'+item.price+'/元</span></p>'+
		'</div>'+
		'<div class="clearfix"> </div>'+
	  '</div>'
				)
	})
}
//加载房屋信息
function homequery(data){
	$.each(data,function(index,item){
		$(function(){
				var date = new Date(item.makeDate);
			    var y = date.getFullYear();
			    var m = date.getMonth()+1;
			    m = m<10?'0'+m:m;
			    var d = date.getDate();
			    d = d<10?("0"+d):d;
			    var h = date.getHours();
			    h = h<10?("0"+h):h;
			    var M = date.getMinutes();
			    M = M<10?("0"+M):M;
			    var str = y+"-"+m+"-"+d+" "+h+":"+M;
			    item.makeDate=str;
		})
		if(item.homeType==1){
			item.homeType="一室"
		}
		if(item.homeType==2){
			item.homeType="两室"
		}
		if(item.homeType==3){
			item.homeType="三室"
		}
		if(item.homeType==4){
			item.homeType="四室"
		}
		if(item.homeType==5){
			item.homeType="五室"
		}
		if(item.homeWay==1){
			item.homeWay="整租"
		}
		if(item.homeWay==2){
			item.homeWay="合租"
		}
		if(item.timeWay==1){
			item.timeWay="晚"
		}
		if(item.timeWay==2){
			item.timeWay="月"
		}
		if(item.timeWay==3){
			item.timeWay="年"
		}
		$('#demo').append(
			    '<div class="col-sm-5 middle-side immediate">'+
				'<h4>房屋信息</h4>'+
				'<p><span class="bath">房屋名称</span>: <span class="two">'+item.title+'</span></p>'+
		         '<p>  <span class="bath1">交通情况 </span>: <span class="two">'+item.trafficSituation+'</span></p>'+
		         '<p><span class="bath3">房型</span>:<span class="two">'+item.homeType+'</span></p>'+
		         '<p><span class="bath3">出租方式</span>:<span class="two">'+item.homeWay+'</span></p>'+
		         '<p><span class="bath4">时间方式</span> : <span class="two">'+item.timeWay+'</span></p>'+
		         '<p><span class="bath5">详细地址 </span>:<span class="two">'+item.address+'</span></p>'+
		         '<p><span class="bath5">发布时间 </span>:<span class="two">'+item.makeDate+'</span></p>'+
		         '<input type="hidden" value="'+item.address+'" id="bath5">'+
		        '</div>'+
		        '<div class="col-sm-7 buy-sin">'+
				'<h4>房屋发布人</h4>'+
			 	'<img alt="" style="width: 200px;height: 200px;" src="/img/'+item.headimg+'"/>'+ 
			 	'<p><span>发布人姓名 </span>:<span>'+item.username+'</span></p>'+
			 	'<button class="layui-btn layui-btn-sm layui-btn-danger">在线聊天</button>'+
		         '<div class="   right-side">'+
				 '<a href="JavaScript:" class="hvr-sweep-to-right more" >立即订购</a>'+     
		        '</div>'+
			 	'</div>'
		)
	})
	var bath5=$("#bath5").val();
	map(bath5);
}
</script>
<div class="footer">
	<div class="container">
		<div class="footer-top-at">
			<div class="col-md-3 amet-sed">
				<h4>Our Company</h4>
				<ul class="nav-bottom">
					<li><a href="demo/404.html">About Us</a></li>
					<li><a href="demo/404.html">For Sale By Owner Blog</a></li>
					<li><a href="demo/404.html">Mobile</a></li>
					<li><a href="demo/404.html">Terms & Conditions</a></li>
					<li><a href="demo/404.html">Privacy Policy</a></li>	
					<li><a href="demo/404.html">Blog</a></li>
				</ul>	
			</div>
			<div class="col-md-3 amet-sed ">
				<h4>Work With Us</h4>
					<ul class="nav-bottom">
						<li><a href="demo/404.html">Real Estate Brokers</a></li>
						<li><a href="demo/404.html">Business Development</a></li>
						<li><a href="demo/404.html">Affiliate Programs</a></li>
						<li><a href="demo/404.html">Sitemap</a></li>
						<li><a href="demo/404.html">Careers</a></li>
						<li><a href="demo/404.html">Feedback</a></li>	
					</ul>	
			</div>
			<div class="col-md-3 amet-sed">
				<h4>Customer Support</h4>
				<p>Mon-Fri, 7AM-7PM </p>
				<p>Sat-Sun, 8AM-5PM </p>
				<p>177-869-6559</p>
					<ul class="nav-bottom">
						<li><a href="demo/404.html">Live Chat</a></li>
						<li><a href="demo/404.html">Frequently Asked Questions</a></li>
						<li><a href="demo/404.html">Make a Suggestion</a></li>
					</ul>	
			</div>
			<div class="col-md-3 amet-sed ">
				<h4>Property Services</h4>
				   <ul class="nav-bottom">
						<li><a href="demo/404.html">Residential Property</a></li>
						<li><a href="demo/404.html">Commercial Property</a></li>
						<li><a href="demo/404.html">Login</a></li>
						<li><a href="demo/404.html">Register</a></li>
						<li><a href="demo/404.html">Short Codes</a></li>	
					</ul>	
					<ul class="social">
						<li><a href="demo/404.html"><i> </i></a></li>
						<li><a href="demo/404.html"><i class="gmail"> </i></a></li>
						<li><a href="demo/404.html"><i class="twitter"> </i></a></li>
						<li><a href="demo/404.html"><i class="camera"> </i></a></li>
						<li><a href="demo/404.html"><i class="dribble"> </i></a></li>
					</ul>
			</div>
		<div class="clearfix"> </div>
		</div>
	</div>
	<div class="footer-bottom">
		<div class="container">
			<div class="col-md-4 footer-logo">
				<h2><a href="index.html">REAL HOME</a></h2>
			</div>
			<div class="col-md-8 footer-class">
				<p >Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
		<div class="clearfix"> </div>
	 	</div>
	</div>
</div>
</body>
<script type="text/javascript">
function map(bath5){
/*var bath5="武汉市洪山区光谷步行街青年城8-2-1503";
alert(bath5);*/
    // 百度地图API功能
	var map = new BMap.Map("allmap");          
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
	//创建地址解析器实例
	var myGeo=new BMap.Geocoder();
	//解析地址显示在地图上
	myGeo.getPoint(bath5,function(point){
		if(point){
			map.centerAndZoom(point,16);
			var myIcon=new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/for.gif",new BMap.Size(300,157));
			var marker=new BMap.Marker(point);//创建标注
			map.addOverlay(marker);
			//map.enadleScrollWheelZoom(true);
			marker.enableDragging();
			marker.setAnimation(BMAP_ANIMATION_BOUNCE);
		}else{
			alert("你的地址没有解析到结果");
		}
	})
}
</script>
</html>